<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">

    <title>登录界面</title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->

</head>

<body>
<div style="width:100%;background:#EDEDED">
    <span style='margin-left:900px'>
    <a href='index'><img src='images/h1.png' width='30px'><font color='#0A0A0A'>回首页</font></a>&nbsp;
    <a href='login'><img src='images/h2.png' width='30px'><font color='#0A0A0A'>请登录</font></a>&nbsp;
    <a href='Register'><img src='images/h3.png' width='30px'><font color='#0A0A0A'>请注册</font></a>&nbsp;
    </span>
    <hr/>
</div>

<span style='margin-left:20px'>
    <img src='images/title.png' width='15%'/><font color='#458B74' face='黑体' size='+3'>用户登录</font>
    
    </span>
<hr/>

<div style="width:100%;height:650px;background:url('images/a2.jpg');">
    <br/><br/><br/>
    <div style="margin-left:400px;">
        <br/><br/><br/>

        <div style="width:400px;height:220px;background:#FFFAFA;border:2px solid #96c2f1; border-radius:25px;background:#eff7ff;">
            <center>
                <form action="LoginServlet" method="post">
                    <table style="padding-top:30px">
                        <tr>
                            <td>
                                <font color='#104E8B'>账号：</font>
                            </td>
                            <td>
                                <input type="text" name="username" oninput="handleInput(event)" style="width:200px;"/>
                            </td>
                        </tr>

                        <tr>
                            <td>
                                <font color='#104E8B'>密码：</font>
                            </td>
                            <td>
                                <input type="password" name="userpass" style="width:200px;"/>
                            </td>
                        </tr>

                        <tr>
                            <td>
                                <font color='#104E8B'>权限：</font>
                            </td>
                            <td>
                                <select name="power" style='width:200px' id="power">
                                    <option value="用户">用户</option>
                                    <option value="管理员">管理员</option>
                                </select>
                            </td>
                        </tr>
                    </table>
                    <br/>

                    <input type="submit" value="登录" style="width:250px;height:25px"/><br/><br/>

                </form>
            </center>
        </div>
    </div>

</div>


</body>
<script>

    function handleInput(event) {
        const inputValue = event.target.value.toLowerCase();
        //根据输入的内容，如果为admin 自动更改为管理员
        if (inputValue === "admin") {
            const selectElement = document.getElementById("power");
            selectElement.selectedIndex = 1;
        }
    }
</script>
</html>

